import { useRef, useState } from "react";
import TodoList from "./TodoList";
import TButton from "./components/Botton";
import TTable, { TableColumnsType, KeyType } from "./components/Table";
import TInput, { InpRef } from "@/components/Input";
import { Table } from "antd";

function App() {
  // // 非受控组件
  // const inpRef = useRef<InpRef>(null);
  // function onClick() {
  //   console.log(inpRef.current?.value, "value");
  // }
  // // 受控组件
  // const [value, setValue] = useState("");
  // function onChang(v: string) {
  //   setValue(v);
  // }

  interface DataType {
    name: string;
    age: number;
    sex: string;
  }
  const data: DataType[] = [
    {
      name: "张三",
      age: 18,
      sex: "男",
    },
    {
      name: "李四",
      age: 20,
      sex: "男",
    },
  ];
  const columns: TableColumnsType<DataType> = [
    {
      title: "姓名",
      dataIndex: "name",
      width: 120,
      align: "left",
    },
    {
      title: "年龄",
      dataIndex: "age",
      width: 120,
      align: "left",
    },
    {
      title: "性别",
      dataIndex: "sex",
      width: 120,
      align: "left",
    },
  ];

  const [selectedRowKeys, setSelectedRowKeys] = useState<KeyType<DataType>[]>(
    []
  );
  return (
    <>
      <TodoList></TodoList>
      {/* <div style={{ margin: "0 auto", width: "300px", padding: "10px" }}>
        <TButton></TButton>
        <TButton type="primary">主要的</TButton>
        <TButton type="text" onClick={onClick}>
          获取input数据
        </TButton>
      </div> */}
      {/* 同时支持受控与非受控组件 */}
      {/* <TInput defaultValue="测试" ref={inpRef}></TInput>
      <TInput value={value} onChange={onChang}></TInput> */}

      <div style={{ margin: "0 auto", width: "100%" }}>
        <TTable
          data={data}
          columns={columns}
          width={500}
          style={{ margin: "0 auto" }}
          checkbox
          rowSelection={{
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
              setSelectedRowKeys(selectedRowKeys);
              console.log(selectedRowKeys, selectedRows);
            },
          }}
        ></TTable>
      </div>
    </>
  );
}

export default App;
